<template>
  <div class="home">
    <div class="head">
      <van-search :value="value" placeholder="请输入搜索关键词" />
    </div>
    <swiper :bannerList='bannerList'></swiper>
    <div class="nav-bar">
      <ul>
        <li v-for="(item,index) in iconList" :key="index">
          <div class="icon"><van-icon :name="item.icon" custom-style="width='.2rem'" size="large"/></div>
          <p>{{item.txt}}</p>
        </li>
      </ul>
    </div>
    <home-list></home-list>
  </div>
</template>

<script>
import Swiper from '../../components/common/swiper/swiper'
import HomeList from './homeList.vue'
import { homeSwiper } from '@/api/index'
export default {
  name: 'Home',
  data () {
    return {
      value: '',
      bannerList: [],
      iconList: [
        { icon: 'coupon-o', txt: 'icon1' },
        { icon: 'other-pay', txt: 'icon2' },
        { icon: 'like-o', txt: 'icon3' },
        { icon: 'qr', txt: 'icon4' },
        { icon: 'orders-o', txt: 'icon5' }
      ]
    }
  },
  components: {
    Swiper,
    HomeList
  },
  async created () {
    const res = await homeSwiper()
    this.bannerList = res
  }
}
</script>

<style lang="less" scoped>
  .home{
    width: 100%;
    height: 100%;
    padding-top: .62rem;
    padding-bottom: .45rem;
  }
  .head{
    width: 100%;
    height: .62rem;
    background: #F2F2F2;
    position: fixed;
    top: 0;
    left: 0;
  }
  .nav-bar{
    height: .7rem;
    ul{
      width: 100;
      height: 100%;
      display: flex;
      li{
        width: 20%;
        height: 100%;
        text-align: center;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
      }
    }
  }

</style>
